<template>
  <div class="photolist">
    <van-tabs animate>
      <van-tab v-for="item in items" :key="item.id">
        <template #title>
          <div @click="getImages(item.id)">{{ item.title }}</div>
        </template>

        <div class="img-box" v-if="images.length > 0">
          <img
            v-for="image in images"
            :key="image.id"
            v-lazy="image.img_url"
            @click="goDetail('/home/photoinfo', image.id)"
            alt=""
          />
        </div>
        <div v-else>暂无数据</div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getImgCategory, getImages } from '@/api/photos'
export default {
  data: () => ({
    items: [],
    images: []
  }),
  methods: {
    async getImgCategory() {
      const res = await getImgCategory()
      res.data.message.unshift(
        {
          id: 0,
          title: '全部'
        }
      )
      this.items = res.data.message
    },
    async getImages(id) {
      const res = await getImages(id)
      console.log(res)
      this.images = res.data.message
    }
  },
  created() {
    this.getImgCategory()
    this.getImages(0)
  }
}
</script>
<style lang="less" scoped>
.photolist {
  padding: 0 6px;
  .img-box {
    img {
      width: 100%;
    }
  }
}
</style>